<template>
	<view>
		<u-navbar title="地址管理" placeholder bgColor="transparent" :autoBack="true">
		</u-navbar>
		<view class="empty" v-if="list.length === 0">
			<image class="emptyImg" src="https://test.uaima.cn/public/static/img/mine/emptySearch.png"></image>
			<view>暂无内容~</view>
		</view>

		<view class="main">
			<view class="item border-box" v-for="(item,index) in list" :key="index" @click="setDefault(item)">
				<view class="" style="padding: 40rpx;">
					<view class="flex align-item_center justify-content_space-between">
						<view class="text-36 font-medium c_151515">{{item.realName}}</view>
						<view class="c_333333 text-30 font-medium">{{item.phone}}</view>
					</view>
					<view class="mt-18 text-30 font-medium c_333333">贵州省遵义市苗族自治县洛龙镇5幢172室</view>
				</view>
				<u-gap height="1rpx" bgColor="#E7E7E7"></u-gap>
				<view class="flex align-item_center justify-content_space-between mt-27" style="padding: 0 40rpx;">
					<view class="flex align-item_center">
						<image v-if="item.isDefault" class="wh36" src="https://test.uaima.cn/public/static/icon/circle_select.png"></image>
						<image v-else class="wh36" src="https://test.uaima.cn/public/static/icon/circle_no_select.png"></image>
						<view class="text-28 font-normal c_151515 ml-11 " :class="[item.isDefault ===1 &&'activeSelect']">默认</view>
					</view>
					<view class="flex align-item_center">
						<view class="flex align-item_center " @click.stop="route_newAddress(item.id)">
							<image class="wh36" src="https://test.uaima.cn/public/static/address/edit.png"></image>
							<view class="text-28 font-normal c_666666 ml-11">编辑</view>
						</view>
						<view class="flex align-item_center ml-60" @click.stop="delArea(item)">
							<image class="wh36" src="https://test.uaima.cn/public/static/address/del.png"></image>
							<view class="text-28 font-normal c_666666 ml-11">删除</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view @click="route_newAddress(-1)"
			class="newAddress absolute text-center text-32 font-medium text-white flex align-item_center justify-content_center">
			<image class="wh48 mr-20" src="https://test.uaima.cn/public/static/address/add.png"></image>
			添加地址
		</view>
		<u-gap height="160rpx"></u-gap>
	</view>
</template>

<script>
	import msg from "@/utils/msg.js"
	export default {
		data() {
			return {
				queryParams: {
					page: 1,
					limit: 10
				},
				total: 0,
				list: [],
			}
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.queryParams.page++;
				this.addressList()
			}
		},
		onShow() {
			this.addressList()
		},
		methods: {
			setDefault(item) {
				this.$iApi.addressEdit({
					...item,
					isDefault: true
				}).then(res => {
					msg.toast("设置成功")
					this.queryParams.page = 1;
					this.addressList()
				})
			},
			delArea(item) {
				let that = this;
				uni.showModal({
					title: "提示",
					content: "是否确认删除当前选择地址?",
					success(res) {
						if (res.confirm) {
							that.$iApi.addressDel({
								id: item.id
							}).then(res => {
								msg.toast("删除成功")
								that.queryParams.page = 1;
								that.addressList()
							})
						}
					}
				})
			},
			addressList() {
				this.$iApi.addressList(this.queryParams).then(res => {
					if (this.queryParams.page === 1) this.list = res.data
					else this.list = [...this.list, ...res.data]
					this.total = res.total
				})
			},
			route_newAddress(id) {
				uni.navigateTo({
					url: "/pages/user/newAddress" + `?id=${id}`
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.newAddress {
		left: 50%;
		transform: translateX(-50%);
		bottom: 60rpx;
		width: 690rpx;
		height: 98rpx;
		background: #67B609;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
	}

	.activeSelect {
		color: #67B609;
	}

	.wh36 {
		width: 36rpx;
		height: 36rpx;
	}

	.wh40 {
		width: 40rpx;
		height: 40rpx;
	}

	.wh48 {
		width: 48rpx;
		height: 48rpx;
	}

	.main {
		.item {
			width: 690rpx;
			height: 280rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 30rpx auto 0;
		}
	}
</style>